<template>
    <div class="main" @scroll.passive="scrollTop($event)">
         <!-- 头部搜素栏 -->
        <div>
            <el-space wrap :size="20">
                <el-input v-model="input" placeholder="请输入管理ID" clearable @keyup.enter.native="search" />
                <el-button type="primary" :icon="Search" @click="search">查找</el-button>
            </el-space>
        </div>
        <!-- 日志列表 -->
        <div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="日志ID" align="center" />
                <el-table-column prop="adminId" label="管理员ID" align="center" />
                <el-table-column prop="requestId" label="请求ID" align="center" />
                <el-table-column prop="group" label="API分组" align="center" />
                <el-table-column prop="method" label="API方法" align="center" />
                <el-table-column prop="name" label="操作时间" align="center">
                    <template #default="scope">
                        <template v-if="scope.row.gmtCreate">
                            {{ new Date(scope.row.gmtCreate).friendTime(1) }}
                        </template>
                        <template v-else>
                            <span>无</span>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <div>
            <Paging v-bind="pagingDatas" @page-change="pageChange"></Paging>
        </div>
        <el-backtop :right="100" :bottom="100" ref="main" target=".main"  :visibility-height="0"  v-if="bool"/>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive,nextTick,watch} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ClassPagination } from "#/index";
import { post } from "@/utils/http";
import Paging from "@/components/paging/Paging.vue";
import { ElMessage } from 'element-plus'
import '@/utils/dataFriend'
let input = ref('')//搜索框
const main = ref()  //滚动组件对象的引用
let bool = ref(true)//用来判断滚动组件的显示隐藏
let rollHeight = ref(0)  //滚动距离
let id = ref('')//用来传递管理员id
let tableData: TypeLogList[] = reactive([]) //操作日志列表
//请求分页的数据
let pagingDatas = reactive(new ClassPagination)


//加载日志列表方法
const loadLogList = () => {
    let data = {
        _gp: 'admin.log',
        _mt: 'list',
        targetAdminId: id.value,
        page: pagingDatas.page,
        limit: pagingDatas.limit
    }
    post(data).then(res => {
        console.log(res);
        if (200 == res.errno) {
            tableData.length = 0
            tableData.push(...res.data.items)
            pagingDatas.total = res.data.total
        } else {
            ElMessage.error(res.errmsg)
            pagingDatas.total = 0
            tableData.length = 0
        }
    })
}
//分页组件每次调用事件
function pageChange(e: TypePaGing) {
    pagingDatas.page = e._page
    pagingDatas.limit = e._limit
    loadLogList()
    nextTick(() => {
        main.value.$el.click?.()
    })
}
//滚动事件
let scrollTop=(e:Event)=>{
    rollHeight.value=Math.floor((e.target as EventTarget).scrollTop)
}
//监听滚动的距离
watch(rollHeight,(val:number)=>{
//    console.log(val);
  bool.value = val>60
})

const search = () => {
    id.value = input.value
    pagingDatas.page= 1
    loadLogList()
}
loadLogList()
</script>
<style lang="less" scoped>
.main {
    >div:nth-child(1) {
       margin: 15px 0px;
       .el-input {
            width: 200px;
        }
    }
}
</style>